<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		
		function appendWord(word,words_div){
			words_div.append('<div class ="word block">'+
					'<p class="word-string">' + word.word + '</p>'+
					'<div class="clear"></div><div class="button"><input type="button" name="' + word.id + '" value="easy" class="easy">'+
					'<input type="button" name="' + word.id + '" value="hard" class="hard"></div>'+
					'<div class="clear"></div></div>');
		}

		$(".hard").live("click", function(){
			var word_id = $(this).attr("name");
			$(this).parent().parent().slideUp(function(){
				$(this).remove();
			});
			$.get("/wordRecord.do", {wordId: word_id, degree: 80, time: new Date().getTime()}, function(data){
				appendWord(data,$("#words"));
			},"json");
		});
		$(".easy").live("click", function(){
			var word_id = $(this).attr("name");
			$(this).parent().parent().slideUp(function(){
				$(this).remove();
			});
			$.get("/wordRecord.do", {wordId: word_id, degree: 20, time: new Date().getTime()}, function(data){
				$(this).parent().parent().slideUp(function(){
					$(this).remove();
				});
				appendWord(data,$("#words"));
				$(".meaning").each(function(){
					$(this).mouseover(function(){
						$(this).children().show();
					});
					$(this).mouseleave(function(){
						$(this).children().hide();
					});
					
				});
			},"json");
		});
		
		$(".add-table").live("click", function(){
			var word_id = $(this).attr("name");
			var that = $(this);
			$.get("addWordTable.do", {wordId: word_id}, function(){
				
				var indicator = that.next("img");
				if(indicator.attr("name") == "indicator-img"){
					indicator.remove();
				}
			});
			$(this).after('<img name="indicator-img" src="/images/indicator.gif" />');
		});
		
		$(".meaning").each(function(){
			$(this).mouseover(function(){
				$(this).children().show();
			});
			$(this).mouseleave(function(){
				$(this).children().hide();
			});
			
		});
		$.get("/chooseUnit.do",function(data){
			var ss = data.split(",");
			$("#unit-select").append('<option value =""></option>');
			for(var i=0; i<ss.length; i++)
				$("#unit-select").append('<option value ="' + ss[i] + '">' + ss[i] + '</option>');
		});
		
		$("#unit-select").change(function(){
			$("#words").empty();
			$.get("/wordRecite.do",{unit: $("#unit-select").val(), time: new Date().getTime()},function(data){
				
				data = data.words;
				for(var i = 0; i < data.length; i ++){
					var word = data[i];
					appendWord(word,$("#words"));
				}
			}, "json");
			
		});
	});
</script>
	
<link rel="stylesheet" type="text/css" href="/common.css">
<style type="text/css">
	.word{
		padding:10px;
	}
	#content{
		width:600px;
		
	}
	.word-string{
		font-size:40px;
		margin:0 20px;
		float:left;
	}
	.meaning{
		margin:10px 20px 0;
		
		color: lightGray;
	}
	.button{
		float:right;
		margin:10px;
	}
	#unit-select-div{
		margin:10px;
	}
</style>

<title>背诵单词</title>
</head>
<body>
	<div id="content">
		
		<%@ include file="word-header.jsp" %>
		<hr>
		<div id="main">
			<div id="unit-select-div">
				选择单元:<select id="unit-select"></select>
			</div>
			<div id="words">
				<!--  
				<c:forEach var="word" items="${words}">
					<div class="word block" id="${word.id}">
						<p class="word-string">${word.wordString}</p><button class="add-table">+</button>
						<div class="clear"></div>
						<div class="button">
							<input type="button" name="${word.id}" value="easy" class="easy">
							<input type="button" name="${word.id}" value="hard" class="hard">
						</div>
						<div class="clear"></div>
					</div>
				</c:forEach>
				-->
			</div>
		</div>
	</div>
</body>
</html>